<template>
    <div id="hotel_detail">
        <div v-if="loading_completed">
            <div class="breadcrumb">
                <div
                    class="breadcrumb_hotel"
                    @click="$router.push('/hotel')"
                >
                    酒店
                </div>
                <i class="el-breadcrumb__separator el-icon-arrow-right" />
                <div
                    class="breadcrumb_city"
                    @click="$router.push(`/hotel?cityName=${hotel_detail.city.name.split('市')[0]}`)"
                >
                    {{ hotel_detail.city.name.split("市")[0] }}酒店
                </div>
                <i class="el-breadcrumb__separator el-icon-arrow-right" />
                <div class="breadcrumb_hotel_name">
                    {{ hotel_detail.name }}
                </div>
            </div>
            <div class="content">
                <div class="message">
                    <div class="name">
                        {{ hotel_detail.name }}
                    </div>
                    <div class="alias">
                        {{ hotel_detail.alias }}
                        <span v-if="hotel_detail.hotellevel">
                            <i
                                v-for="(item, index) in hotel_detail.hotellevel.level"
                                :key="index"
                                class="iconfont iconhuangguan"
                            />
                        </span>
                    </div>
                    <div class="position">
                        <i class="el-icon-location" />
                        位于:{{ hotel_detail.address }}
                    </div>
                </div>
                <div class="photo">
                    <div class="photo_top">
                        <img :src="require(`@/static/hotel_${photo_top}.jpg`)" alt="">
                    </div>
                    <div class="photo_list">
                        <div
                            v-for="item in 6"
                            :key="item"
                            class="photo_list_item"
                            @click="photo_top=item"
                        >
                            <img :src="require(`@/static/hotel_${item}.jpg`)" alt="">
                        </div>
                    </div>
                </div>
                <div class="product">
                    <div class="product_item title">
                        <div class="product_name">
                            价格来源
                        </div>
                        <div class="best_type">
                            低价房型
                        </div>
                        <div class="product_price">
                            最低价格/每晚
                        </div>
                    </div>
                    <div v-for="(item, index) in hotel_detail.products" :key="index" class="product_item">
                        <div class="product_name">
                            {{ item.name }}
                        </div>
                        <div class="best_type">
                            {{ item.bestType }}
                        </div>
                        <div class="product_price">
                            <span class="price">
                                ￥{{ item.price }}
                            </span>
                            <span>起</span>
                            <span>
                                <i class="el-icon-arrow-right" />
                            </span>
                        </div>
                    </div>
                </div>
                <div class="around_map">
                    <div class="map">
                        <HotelPublicMap
                            :hotel-detail-list="map_marker_list"
                            :is-around="true"
                            :center_index="center_index"
                            :hotel_detail="hotel_detail"
                        />
                    </div>
                    <div class="nearby" v-if="map_marker_list">
                        <ViewTheTrafficData
                            :nearbyData="map_marker_list"
                            :hotel_detail="hotel_detail"
                            @send_center_data="get_center_data"
                            @spread_traffic_attractions="get_traffic_attractions"
                         />
                    </div>
                </div>
            </div>
            <div>
                <EssentialInformation 
                    :hotel_detail="hotel_detail"
                 />
            </div>
            <div>
                <UserRatings 
                    :hotel_detail="hotel_detail"
                />
            </div>
            <div>
                <Comment />
            </div>
        </div>
        <div v-else class="loading">
            <img :src="require('@/static/loading.gif')" alt="" style="width: 450px; height: 260px;">
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                loading_completed: false,
                map_key: "34723cdff8d29820decbe8b8284ecfbb",
                id: 0,
                hotel_detail: {},
                photo_top: 1,
                around_data: {
                    scenery: []
                },
                map_marker_list: [],
                nearbyData:[],
                center_index:0,
            };
        },
        created () {
            this.id = this.$route.params.id;
            this.get_hotel_detail();
        },
        methods: {
            async get_hotel_detail () {
                const res = await this.$axios.get(`http://157.122.54.189:9095/hotels?id=${this.id}`);
                this.hotel_detail = res.data.data[0];
                this.loading_completed = true;
                this.get_scenery_detail();
            },
            async get_scenery_detail () {
                const res = await this.$axios({
                    method: "GET",
                    url: "https://restapi.amap.com/v3/place/around?parameters",
                    params: {
                        key: this.map_key,
                        location: this.hotel_detail.location.longitude + "," + this.hotel_detail.location.latitude,
                        types: "风景名胜",
                        city: this.hotel_detail.city.name.split("市")[0],
                        output: "JSON",
                        page: 1,
                        offset: 10
                    }
                });
                this.around_data.scenery = res.data.pois;
                // 添加酒店位置
                this.around_data.scenery.push(this.hotel_detail)
                this.map_marker_list = this.around_data.scenery;
                this.nearbyData = res.data.pois
            },
            async AccessYoTransportation () {
                const res = await this.$axios.get('https://restapi.amap.com/v3/place/around?parameters ',{
                    params: {
                        key: this.map_key,
                        location: this.hotel_detail.location.longitude + "," + this.hotel_detail.location.latitude,
                        keywords: '交通' ,
                        output: "JSON",
                        page: 1,
                        offset: 10
                    }
                })
                this.around_data.scenery = res.data.pois;
                this.around_data.scenery.push(this.hotel_detail)
                this.map_marker_list = this.around_data.scenery;
                this.nearbyData = res.data.pois
                console.log(this.map_marker_list);
            },

            get_center_data (index) {
                this.center_index = index
            },

            get_traffic_attractions (index) {
                if(index == 0){
                    console.log(1111);
                    this.get_scenery_detail()
                }else {
                    console.log(2222);
                    this.AccessYoTransportation()
                }
            }
        }
    };
</script>

<style lang="less" scoped>
#hotel_detail {
    width: 1000px;
    margin: 0 auto;
    padding-bottom: 20px;
    .loading {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .breadcrumb {
        height: 56px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;
        line-height: 1;
        .breadcrumb_hotel,.breadcrumb_city {
            font-weight: 700;
            cursor: pointer;
            &:hover {
                color: #409EFF;
            }
        }
    }
    .content {
        .message {
            margin-bottom: 60px;
            .name {
                cursor: pointer;
                font-weight: 400;
                font-size: x-large;
                margin-bottom: 5px;
            }
            .alias {
                color: #666;
                margin-bottom: 8px;
                i {
                    color: #f90;
                }
            }
            .position {
                color: #666;
            }
        }
        .photo {
            width: 100%;
            height: 360px;
            display: flex;
            .photo_top {
                width: 640px;
                height: 100%;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .photo_list {
                padding-left:20px;
                height: 100%;
                width: 420px;
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;
                .photo_list_item {
                    cursor: pointer;
                    height: 114px;
                    width: 48%;
                    &:nth-child(3),&:nth-child(4) {
                        margin: 10px 0;
                    }
                    &:nth-child(2n+1) {
                        margin-right: 10px;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .product {
            width: 100%x;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .product_item {
                padding-right: 40px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px solid #ebeef5;
                font-size: 14px;
                color: #606266;
                .product_name {
                    width: 60px;
                }
                .product_price {
                    height: 100%;
                    display: flex;
                    width: 100px;
                    justify-content: space-around;
                    span {
                        display: inline-block;
                        line-height: 50px;
                    }
                    .price {
                        color: #f90;
                        font-size: larger;
                    }
                }
                .best_type {
                    width: 90px;
                }
                &.title {
                    cursor:default;
                    font-weight: 700;
                    color: #909399;
                    .product_price {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
            .product_item:hover {
                background-color: #F5F7FA;
            }
        }
        .around_map {
            width: 100%;
            height: 360px;
            display: flex;
            justify-content: space-between;
            .map {
                width: 650px;
                height: 100%;
            }
            .nearby {
                width: 340px;
                height: 100%;
            }
        }
    }
}
</style>
